<template>
  <div>
    <div class="header">
      <h3>产品绑定</h3>
      <input type="text" placeholder="请输入完整的产品防伪码" v-model="qrcode" maxlength="8">
      <button @click="getProduct">
        <span>产品查询绑定</span>
      </button>
    </div>
    <div class="hcontent">
      <h5>绑定说明：</h5>
      <p>请输入产品保修卡上二维码旁8位防伪码进行查询绑定，也可使用微信直接扫码保修卡上的二维码</p>
      <p>若您购买多款我们的产品，请按照相同步骤依次进行绑定。您的所有产品将会独立罗列。</p>
    </div>
    <foot page='home'></foot>

    <div class="popup" v-show="checkcode.swt">{{checkcode.text}}</div>

    <toast :type="type" v-show="load">{{msg}}</toast>
  </div>

</template>
<script>
import foot from "../public/foot";
import District from "ydui-district/dist/gov_province_city_area_id";
import toast from "../loading/loading";
export default {
  components: {
    foot,
    toast
  },
  data() {
    return {
      qrcode: "",
      checkcode: {
        swt: false,
        text: ""
      },
      userId: "",
      msg: "查询中",
      type: "loading",
      load: false
    };
  },
  mounted() {
    this.userLogin();
  },
  methods: {
    checkinput() {},
    getProduct() {
      var that = this;
      if (this.qrcode.length > 8) {
        that.checkcode = { swt: true, text: "防伪码有误，请重新输入" };
        setTimeout(() => {
          that.checkcode = { swt: false, text: "防伪码有误，请重新输入" };
        }, 2000);
        return;
      }
      // var id = this.$route.query.id;
      // console.log(code);
      // alert(id);
      // id = id ? id : "";

      var cookie = document.cookie.split(";");
      var cookies = [];
      for (var i = 0; i < cookie.length; i++) {
        var temp = cookie[i].trim().split("=");
        cookies[temp[0]] = temp[1];
      }
      // console.log(cookies);
      var id = cookies["id"];
      if (!id) {
        window.location.href = "wztest.wofew.com/api/Main/login";
      } else {
        this.load = true;
        var that = this;
        var req = $.ajax({
          type: "get",
          url: `${this.$store.state.globalIp}/api/Main/check_bind`,
          data: {
            code: this.qrcode,
            // id: that.userId
            id: id
          },
          dataType: "json",
          success(result) {
            that.load = false;
            if (result.message == "成功") {
              var data = result.data;
              data.userId = that.userId;
              if (data.status == 0) {
                that.$router.push({ path: "inquire", query: data }); // 未绑定
              } else {
                that.$router.push({ path: "result", query: data }); //绑定
              }
            } else {
              that.checkcode = { swt: true, text: "防伪码有误，请重新输入" };
              setTimeout(() => {
                that.checkcode = { swt: false, text: "防伪码有误，请重新输入" };
              }, 2000);
            }
          }
        });
        var timer = setTimeout(function() {
          if (that.load) {
            req.abort();
            that.load = false;
            that.checkcode = { swt: true, text: "请求超时,请重试" };
            setTimeout(() => {
              that.checkcode = { swt: false, text: "请求超时,请重试" };
            }, 2000);
          }
        }, 15000);
      }
    },
    userLogin() {
      var that = this;
      // var code = this.$route.query.code;
      // console.log(code);
      // alert(code);
      // code = code ? code : "";
      // var id = this.$route.query.id;
      // console.log(code);
      // alert(id);
      // id = id ? id : "";
      var cookie = document.cookie.split(";");
      var cookies = [];
      for (var i = 0; i < cookie.length; i++) {
        var temp = cookie[i].trim().split("=");
        cookies[temp[0]] = temp[1];
      }
      console.log(cookies);
      var id = cookies["id"];
      if (!id) {
        window.location.href = "http://wztest.wofew.com/api/Main/login";
      }
    }
  }
};
</script>
<style scoped>
.header {
  width: 351px;
  height: 225px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px auto;
  text-align: center;
  padding-top: 32px;
  box-sizing: border-box;
}
.header h3 {
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header input {
  -webkit-appearance: none;
  width: 327px;
  height: 44px;
  padding-left: 12px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin: 24px 0;
  outline: none;
  font-size: 14px;
  font-family: PingFangSC-Regular;
}
.header button {
  width: 327px;
  height: 44px;
  background: rgba(0, 0, 0, 1);
  border-radius: 5px;
  margin: 0 auto;
  outline: none;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hcontent {
  width: 327px;
  height: 104px;
  margin: 24px auto;
}
h5 {
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
}
p {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  height: 34px;
  line-height: 17px;
  margin-top: 5px;
}

.popup {
  width: 245px;
  height: 44px;
  background:rgba(40,40,40,.75);
  border-radius: 5px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  line-height: 44px;
  text-align: center;
  /* margin: 0 auto; */
  position: fixed;
  left: 68px;
  top: 280px;
}
</style>
